<script lang="ts" setup>
import { useI18n } from '@/hooks/web/useI18n'

defineProps<{
  title: string
  image?: string
  video?: string
  introduce: string
}>()
const { t } = useI18n()
</script>
<template>
  <div class="ImageIntroduction">
    <div class="i-tit">{{ t(title) }}</div>
    <div class="i-img">
      <!-- <img :src="image" /> -->
      <img v-if="image" :src="image" />
      <video v-else :src="video" autoplay loop></video>
    </div>
    <div class="i-intr">{{ t(introduce) }} </div>
  </div>
</template>

<style lang="less" scoped>
.ImageIntroduction {
  font-weight: bold;
  .i-tit {
    padding: 12px 0;
    color: #fff;

    font-size: 18px;
    padding-bottom: 0;

    text-shadow: #1f64ca 2px 0 2px, #1f64ca 0 2px 2px, #1f64ca -2px 0 2px,
      #1f64ca 0 -2px 2px;
  }

  .i-img {
    margin: 12px 0;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    padding-top: 56.5%;

    border: solid 3px #ffffff;

    img,
    video {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .i-intr {
    color: #c0e0fa;
    font-size: 15px;
  }
}
</style>
